<template>
  <div class="typeedit">
    <el-container>
      <el-header>
        <div class="typeedit_header">
          <span>轮播广告图</span>
          <button @click="add()" v-if="tianjia">添加新的轮播图</button>
        </div>
      </el-header>
      <el-main v-if="tianjia">
        <el-table
          :data="list"
          border
          style="width: 100%"
          row-key="type"
          :lazy="true"
        >
          <el-table-column width="250" prop="memo" label="名称">
          </el-table-column>
          <el-table-column width="250" prop="hot" label="热度">
          </el-table-column>
          <el-table-column width="250" prop="type" label="类型">
          </el-table-column>
          <el-table-column width="250" prop="picture" label="图片">
            <template #default="scope">
              <!-- <img :src="`${$Imgurl}/api/public/showImg/${typeadd[scope.$index].picture}`" /> -->
              <!-- <img :src="`${$Imgurl}/api/public/showImg/${scope.picture}`" /> -->
              <!-- {{typeadd[scope.$index]}} -->
              <img
                :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
                style="width: 80px; height: 80px"
              />
            </template>
          </el-table-column>
          <el-table-column width="250" label="操作">
            <template #default="scope">
              <el-button type="warning" @click="cc(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
	  <!--  -->	·
	  <el-main v-if="!tianjia">
	    <div class="dis">
			<div class="disl">描述</div>
			<div style="width: 100%;">
				<el-input v-model="memo" />
			</div>
		</div>
		<div class="dis">
			<div class="disl">热度-整数</div>
			<div style="width: 100%;">
				<el-input v-model="hot" />
			</div>
		</div>
		<div class="dis">
			<div class="disl">类型-整数</div>
			<div style="width: 100%;">
				<el-input v-model="type" />
			</div>
		</div>
		<div class="dis">
			<div class="disl">轮播图片</div>
			<div style="width: 100%;">
				<el-upload
				    class="avatar-uploader"
				    action=""
					 :auto-upload="false"
					list-type="picture-card"
				    :on-success="handleAvatarSuccess"
				    :before-upload="beforeAvatarUpload"
					 :limit='1'
					  :on-remove="handleRemove"
					   :on-change="handleChange"
					
				  >
				    <img v-if="imageUrl" :src="imageUrl" />
				
				   <aside>点击此处选择头像图片</aside> 
				  </el-upload>
			</div>
		</div>
		<div>
			<el-button @click="fanhui()">返回列表</el-button>
			<el-button @click="tj()">提交</el-button>
		</div>
	  </el-main>
    </el-container>
  </div>
</template>

<script>


// 
	
export default {
  name: "Typeedit",
  data() {
    return {
      list: [],
	  tianjia:true,
	  // 
	  imageUrl:'',
	  file:'',
	  uploadDisabled:true,
	  // 
	  memo:'',
	  hot:'',
	  type:'',
    };
  },
  methods: {
    add() {
      // this.$router.push('/admin/banner');
      console.log(this.list);
	  this.tianjia = false;
    },
    cc(s) {
      console.log(s);
	  this.axios
	    .get("/api/adm/hot/delete/"+s.id)
	    .then((res) => {
	      // 请求成功
	      if (res.status === 200) {
	        console.log(res);
	      }
		  this.chushi();
	    })
	    .catch((error) => {
	      console.log(error);
	    });
    },
	chushi(){
		this.axios
		  .get("/api/adm/hot/findAll")
		  .then((res) => {
		    // 请求成功
		    if (res.status === 200) {
		      this.list = res.data.data;
		    }
		  })
		  .catch((error) => {
		    console.log(error);
		  });
	},
	// 上传图片
	 //  upload(){
		//   const formData = new FormData();
		//   formData.append('img',this.file.raw);
		//   // consol.log(this.file.raw.File);
		// instance.post('/api/fore/user/updateImg',formData,{ headers: {'Content-Type': 'multipart/form-data'}}).then((res)=>{
		// 	console.log(this.$store.state.img);
		// 	// this.change
		//   }).catch((error)=>{
		// 	  console.log(error)
		//   })
		  
	 //  },
	handleAvatarSuccess(res, file) {
	  this.imageUrl = URL.createObjectURL(file.raw)
	},
	handleRemove(file,fileList) {
	      //imgDelete.post({pic_name : file.response.pic_name}).then();
	  this.uploadDisabled = false;
	},
	handleChange(file) {
		this.file = file;
		console.log(file);
	},
	beforeAvatarUpload(file) {
	  const isJPG = file.type === "image/jpeg";
	  const isLt2M = file.size / 1024 / 1024 < 2;
	
	  if (!isJPG) {
	    this.$message.error("Avatar picture must be JPG format!");
	  }
	  if (!isLt2M) {
	    this.$message.error("Avatar picture size can not exceed 2MB!");
	  }
	  return isJPG && isLt2M;
	},
	tj(){
		const formData = new FormData();
		  formData.append('pic',this.file.raw);
		  formData.append('memo',this.memo);
		  formData.append('hot',this.hot);
		  formData.append('type',this.type);
		  // consol.log(this.file.raw.File);
		  this.axios.post('/api/adm/hot/addHot',formData).then((res)=>{
			console.log(res);
			this.chushi();
		  }).catch((error)=>{
			  console.log(error)
		  })
	},
	// 返回列表
	fanhui(){
		this.tianjia = true;
	}
  },
  // 组件创建之后
  created() {
    this.chushi();
	this.axios
	  .get("/api/adm/hot/findAll")
	  .then((res) => {
	    this.list = res.data.data;
	    console.log(this.list);
	  })
	  .catch((error) => {
	    console.log(error);
	  });
  },
};
</script>

<style scoped>
.typeedit_header {
  line-height: 80px;
}
.typeedit_header span {
  font-size: 20px;
  font-weight: bold;
}
.typeedit_header button {
  float: right;
  height: 23px;
  width: 100px;
  margin-top: 25px;
  font-size: 10px;
}
.dis{
	display: flex;
}
.disl{
	width: 80px;
	text-align: center;
}
</style>
